<template>
  <view>
    <!-- tab标签 -->
    <view class="swiper-tab">
      <view
        :class="'tab-item ' + (currentTab == 0 ? 'active' : '')"
        data-current="0"
        @click="clickTab"
        >站点信息</view
      >
      <view
        :class="'tab-item ' + (currentTab == 1 ? 'active' : '')"
        data-current="1"
        @click="clickTab"
        >充电位</view
      >
    </view>

    <!-- tab详情 -->
    <swiper
      :current="currentTab"
      duration="300"
      @change="swiperTab"
      :style="'height:' + winHeight + 'rpx'"
    >
      <swiper-item>
        <scroll-view :scroll-y="true" class="scoll-h">
          <view class="detail_item_container">
            <view class="detail_item1">
              <view class="detail_item1-center">
                <view class="line1">
                  <image
                    class="icon-map-zhan"
                    src="/static/images/icon-map-dpc-zhan.png"
                  ></image>
                  <view class="line1-name">{{ station_info.name }}</view>
                </view>

                <view class="line2"> </view>

                <view class="line3">
                  <view class="line3-area">{{ station_info.area }}</view>
                </view>
                <view class="line4">
                  <uni-tag
                    :inverted="true"
                    :text="stationType(station_info.type)"
                    type="warning"
                    size="small"
                  />
                  <!-- <van-tag type="warning" plain>{{
                    stationType(station_info.type)
                  }}</van-tag> -->
                </view>
              </view>
              <view class="detail_item1-right"> </view>
            </view>
            <view class="detail_line"></view>
            <view class="detail_item2">
              <view class="item2-left">
                <!-- TODO这里可以用闲 和 满 来替换文字占位，class kuai 是橘色 man 是绿色 来区分 -->
                <view class="man">闲</view>
                <!-- <view class="kuai">满</view> -->
                <view class="item2-man">
                  充电位 ：
                  {{
                    station_info.slowNum == null ? 0 : station_info.slowNum
                  }}/{{
                    station_info.lastSlowNum == null
                      ? 0
                      : station_info.lastSlowNum
                  }}
                </view>
              </view>
            </view>
            <view class="detail_line"></view>
            <!-- 3 -->
            <view class="detail_item3" @click="clickOpenNav">
              <view class="detail_item3-left">
                <uni-icons type="location" size="20"></uni-icons>
                <!-- <van-icon name="location-o" color="#2c2c2c" /> -->
                <view class="item3-address">
                  {{ station_info.address }}
                </view>
              </view>
              <view class="detail_item3-center">
                <image
                  class="icon-area-img"
                  src="/static/images/icon_distance.png"
                ></image>
                {{ distance }}km
              </view>
            </view>
            <view class="detail_line"></view>
            <view class="detail_item4">
              <view class="detail_item4-left">
                <view class="item4-payway">
                  <image class="pay-icon" src="/static/icon/pay-o.png"></image>
                  <!-- <van-icon name="gold-coin-o" size="35rpx" class="pay-icon" /> -->
                  支付方式
                </view>
                <view class="item4-payway">
                  <image
                    class="pay-icon"
                    src="/static/icon/hotel-o.png"
                  ></image>
                  <!-- <van-icon name="hotel-o" size="35rpx" class="pay-icon" /> -->
                  站点所有方
                </view>
                <view class="item4-payway">
                  <image
                    class="pay-icon"
                    src="/static/icon/clock-o.png"
                  ></image>
                  <!-- <van-icon name="clock-o" size="35rpx" class="pay-icon" /> -->
                  营业时段
                </view>
              </view>

              <view class="detail_item4-right">
                <view class="item4-payway-content">微信</view>
                <view class="item4-payway-content">
                  {{ station_info.stationOwner }}
                </view>
                <view class="item4-payway-content">
                  {{ station_info.businessHours }}
                </view>
              </view>
            </view>
            <view class="detail_line"></view>
            <view class="cu_line"></view>
            <view class="detail_item5">
              <view class="item5-num">近7天成功充电 {{ day7_count }} 次</view>
              <view class="item5-text">
                <!-- 查看详情 -->
              </view>
              <image class="item5-img" src="/static/images/ic_go.png"></image>
            </view>
            <view class="detail_line"></view>
          </view>
        </scroll-view>
      </swiper-item>

      <!-- 充电桩 -->
      <swiper-item>
        <scroll-view
          :scroll-y="true"
          class="scoll-h"
          @scrolltolower="lower"
          id="scroller"
          @scroll="onScroll"
        >
          <!-- <van-sticky
            :scroll-top="scrollTop"
            :offset-top="offsetTop"
            v-if="station_info.name"
          > -->
          <view class="gk-sticky" v-if="station_info.name">
            <view class="point-name-line">
              <image
                class="icon-map-zhuang"
                src="/static/images/icon-map-dpc-wei.png"
              ></image>
              <view class="point-name">{{ station_info.name }}</view>
              <!-- <view class='point-distance'>
        距离{{distance}} km
      </view> -->
            </view>
          </view>
          <!-- </scroll-view> -->
          <!-- </van-sticky> -->
          <!-- <van-empty description="暂无数据哦" v-if="machine_list.length == 0" /> -->
          <view class="detail_line"></view>
          <view
            class="station-list"
            v-for="(item, index) in machine_list"
            :key="index"
          >
            <view class="point-list-item">
              <view class="point-item-left">
                <view class="point-item code">编号： {{ item.code }}</view>
                <!-- <view class='point-item type'>终端类型： {{machineType(item.deviceType)}}</view> -->
                <!-- 1直流 2 交流 -->
                <!-- <view class='point-item interface'>交流接口： {{item.deviceInterface}}</view> -->
                <!-- <view class='point-item power'>功率： {{item.devicePower}}KW</view> -->
                <view class="point-item voltage"
                  >电压： {{ item.deviceVoltage }}V</view
                >
                <view class="point-item device_status">{{
                  machineStatus(item.stat)
                }}</view>
              </view>

              <view class="point-item-right"> </view>
            </view>

            <view class="detail_line"></view>
          </view>
          <view class="bottomTip" v-if="isLower">
            <view class="bottomTxt">~没有更多数据了~</view>
          </view>
        </scroll-view>
        <view class="point-item explain"
          >设备状态 （-1：未上线 0：空闲 1：车桩相连 2：充电中 4：故障）</view
        >
      </swiper-item>
    </swiper>
  </view>
</template>
<script>
import { changeDistance, stationType, openNav } from "../../utils/util.js"
const app = getApp();
let Sign = app.globalData.Sign;
let Store = app.globalData.Store;
let Api = app.globalData.Api;
// let util = require('../../utils/util.js');
export default {
  data() {
    return {
      changeDistance: changeDistance,
      stationType: stationType,
      openNav: openNav,
      scrollTop: 0,
      offsetTop: 0,
      isLower: false,
      currentTab: 0,
      winHeight: '',
      //窗口高度
      station_info: {
        name: '',
        area: '',
        fastNum: '',
        lastFastNum: '',
        slowNum: '',
        lastSlowNum: '',
        address: '',
        stationOwner: '',
        businessHours: ''
      },
      machine_list: [],
      distance: 0,
      //站点距离
      day7_count: 0 //近7天充电次数
    };
  }, //分别从地图和附近站点列表而来，参数 站点编号+,+距离
  onLoad: function (options) {
    console.log(options);
    var Str = options.stationIdAndDistance;
    console.log(Str);
    var index = 1
    // var index = Str.indexOf(',');
    var stationId = Str;
    if (index != -1) {
      stationId = Str.substring(0, index);
      // this.setData({
      this.distance = (Str.substring(index + 1, Str.length) / 1000).toFixed(2)
      // });
    }
    this.getStationInfo(stationId);
  },
  onShow: function () {
    this.setHeight();
  },
  methods: {
    machineType(type) {
      if (type == "1") {
        return "直流";
      } else if (type == "2") {
        return "交流";
      }
    },
    machineStatus(status) {
      if (status == -1) {
        return "离线";
      } else if (status == 0) {
        return "空闲";
      } else if (status == 1) {
        return "插枪连接中";
      } else if (status == 2) {
        return "充电中";
      } else if (status == 4) {
        return "故障";
      }
    },
    lower: function (e) {
      console.log('到底部了');
      // this.setData({
      this.isLower = true
      // });
    },

    // 高度自适应
    setHeight: function () {
      var that = this;
      uni.getSystemInfo({
        success: function (res) {
          var clientHeight = res.windowHeight;
          var clientWidth = res.windowWidth;
          var rpxR = 750 / clientWidth;
          var calc = clientHeight * rpxR - 120;
          //console.log(calc)
          // that.setData({
          that.winHeight = calc
          console.log('that.winHeight: ', that.winHeight);
          // });
        }
      });
    },

    //滑动切换
    swiperTab: function (e) {
      // this.setData({
      this.currentTab = e.detail.current
      // });
    },

    //点击切换
    clickTab: function (e) {
      if (this.currentTab === e.target.dataset.current) {
        return false;
      } else {
        // this.setData({
        this.currentTab = e.target.dataset.current
        // });
      }
    },

    //导航
    navRoad() {
      let this_ = this;
      // positiony: 30.298712 station_lat
      uni.getLocation({
        //获取当前经纬度
        type: 'wgs84',
        //返回可以用于wx.openLocation的经纬度，
        success: function (res) {
          uni.openLocation({
            //​使用微信内置地图查看位置。
            latitude: this_.station_info.positiony,
            //要去的纬度-地址
            longitude: this_.station_info.positionx,
            //要去的经度-地址
            name: this_.station_info.name,
            address: this_.station_info.address
          });
        }
      });
    },

    // 打开地图
    clickOpenNav() {
      var { positiony, positionx, name, address } = this.station_info;
      openNav(positiony, positionx, name, address);
    },

    //拨打
    callPhone: function (event) {
      uni.makePhoneCall({
        phoneNumber: this.station_info.phone
      });
    },

    getStationInfo: function (station_bid) {
      const signObject = {
        station_bid
      };
      const signvalue = Sign.signutil(signObject);
      app.globalData
        .get(Api.getDPCStationInfo, {
          station_bid,
          sign: signvalue
        })
        .then((res) => {
          // this.setData({
          this.station_info = res.station_info,
            this.machine_list = res.machine_list,
            this.day7_count = res.day7_count
          // distance: (res.station_info.distance / 1000).toFixed(3) //详情页没有返回，从url传入
          // });
        })
        .catch((e) => {
          console.log(e);
        });
    },

    onScroll(event) {
      uni.createSelectorQuery()
        .in(uni)
        .select('#scroller')
        .boundingClientRect((res) => {
          console.log(res);
          // this.setData({
          this.scrollTop = event.detail.scrollTop,
            this.offsetTop = 0
          // });
        })
        .exec();
    }
  }
};
</script>
<style>
@import "./stationDpcInfo.css";
</style>
